<template>
  <el-container class="home-container">
    <el-header>
      <div>
      	 <img src="../assets/heima.png" alt="">
        <span>教务管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>    
    </el-header>
      <el-container>
        <el-aside width="200px">
        	<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF"   :unique-opened="true" :default-openeds="openeds" :collapse-transition="false" router :default-active="activePath">
      <!--一级菜单-->
         <el-submenu :index="item.mid+''" v-for="item in menulist" :key="item.mid">
            <template slot="title">
              <i :class="iconsObj[item.mid]"></i>
              <span>{{item.mname}}</span>
          </template>
        <!--
        	二级菜单
        -->
        <el-menu-item :index="'/'+subitem.path" v-for="subitem in item.children" 
        	:key="subitem.mid" @click="saveNavstate('/'+subitem.path)">
        	<template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{subitem.mname}}</span>
        </template>
        </el-menu-item>        
      </el-submenu>
    </el-menu>
        </el-aside>
        <el-main>
        	<router-view />
        </el-main>
     </el-container>
  </el-container>
	
</template>

<script>	
	export default{
		data(){
			return{
				openeds: ['100','200','300','400','500'],
				menulist:[],
				 iconsObj: {
        '100': 'iconfont icon-user',
        '200': 'iconfont icon-tijikongjian',
        '300': 'iconfont icon-shangpin',
        '400': 'iconfont icon-danju',
        '500': 'iconfont icon-baobiao'
     },
     activePath:''
			}
		},
		created(){
			
			//var uid=window.sessionStorage.getItem('uid')
			//console.log(uid);
			this.getMenuList();
		},
		methods:{
			logout(){
				window.sessionStorage.clear()
				this.$router.push('/login')
			},
			async getMenuList(){
				var uid=window.sessionStorage.getItem('createUser')
				const {data:res}=await this.$http.post('modules/queryall',{uid:uid})
				console.log(res)
				if (res.ret!==0) return this.$message.error(res.msg);
				this.menulist=res.data;
				
			},
			saveNavstate(activePath){
				window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
				
			}
		}
	}
</script>

<style scoped>
   .home-container{
   	height: 100%;
   }
  .el-header{
  	background-color: #373d41;
  	display: flex;
  	justify-content:space-between;
  	padding-left: 0;
  	align-items: center;
  	color: #fff;
  	font-size: 20px;
  }
  .el-header div{
  	display: flex;
  	align-items: center;
  }
  .el-header div span{
  	margin-left: 15px;
  }
  .el-aside {
  background-color: #333744;
  
}

.el-aside .el-menu{
	border-right:none
}
.el-main {
  background-color: #eaedf1;
}
.iconfont {
  margin-right: 10px;
}

	
</style>